<template>
  <div class="movie">
    <div class="download-app-bar">
      <img
        class="img noneBg logo"
        alt="logo"
        src="//s0.meituan.net/bs/?f=myfe/canary:/asgard/images/avatar.png"
        width="42"
        height="42"
      />
      <div class="app-name-desc">
        <div class="app-name">猫眼</div>
        <div class="app-desc">在线选座，热门影讯，爱上看电影</div>
      </div>
      <div class="btn-open-app">立即打开</div>
    </div>
    <section class="topbar">
      <div class="white-bg topbar-bg">
        <Location></Location>
        <van-tabs line-width="55px" line-height="2px" style="width:200px;">
          <van-tab title="正在热映" to="/movie/hot"></van-tab>
          <van-tab title="即将上映" to="/movie/f-hot"></van-tab>
        </van-tabs>
        <div class="search-entry search-icon" data-type="movie" @click="gosearch()"></div>
      </div>
    </section>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <Back></Back>
  </div>
</template>
<script>
import Back from '../../components/Back'
import Location from '../../components/Location'
export default {
  data: () => ({
    changFlag: false
  }),
  created () {
    console.log(11)
    this.$store.state.title = '猫眼电影'
    this.$store.state.bottomFlag = true
    this.$store.state.topFlag = true
    this.$store.dispatch('changeActive', this.$route.path)
  },
  monuted () {},
  methods: {
    gosearch () {
      this.$router.push('/search?searchtype=movie')
    }
  },
  components: {
    Back,
    Location
  }
}
</script>
<style lang="less" scoped>
.movie {
  .download-app-bar {
    position: relative;
    height: 63px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    .app-name-desc {
      position: absolute;
      left: 66px;
      top: 13px;
      .app-name {
        font-size: 17px;
        color: #222;
        line-height: 23px;
      }
      .app-desc {
        font-size: 12px;
        color: #999;
      }
    }
    img.logo {
      position: absolute;
      left: 15px;
      top: 11px;
      width: 44px;
      height: 44px;
    }
    img {
      display: block;
    }
    .btn-open-app {
      position: absolute;
      right: 15px;
      top: 17px;
      width: 68px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #ef4238;
      border-radius: 3px;
      font-size: 13px;
      color: #fff;
    }
  }
  .topbar {
    border-bottom: 1px solid #e6e6e6;
    height: 44px;
    .white-bg {
      background-color: #fff;
    }
    .topbar-bg {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      height: 44px;
      -webkit-box-pack: justify;
      justify-content: space-between;
    }
    .search-icon {
      width: 25px;
      height: 25px;
      background: url('../../../public/images/search.png') no-repeat;
      background-size: 25px;
      position: relative;
      right: 15px;
    }
    /deep/ .van-ellipsis {
      font-size: 16px;
      // color: #777;
      font-weight: 700;
    }
    /deep/ .van-tab--active {
      // color: black;
      color: #ef4238;
      font-weight: 1000;
    }
  }
}
</style>
